<template>
    <div class="course-info-card-container">
        <!-- 课程导航栏 -->
        <div class="course-nav">
            <ul>
                <li>首页</li>
                <li><a href="">视频详情</a></li>
            </ul>

        </div>
        <!-- 课程信息 -->
        <div class="course-card">
            <!-- 左侧图片 -->
            <div class="course-img">
                <img :src="courseDetail.coverFileUrl" alt="">
            </div>
            <!-- 中间信息 -->
            <div class="course-info">
                <div class="course-title">{{ courseDetail.courseTitle }}</div>
                <div class="course-desc">
                    <span>累计{{ courseDetail.participationsCount }}人学习</span>
                    <!-- 评分 -->
                    <div>
                        <a-rate :default-value="Math.floor(score)" disabled />

                    </div>
                </div>
                <div class="course-price">
                    <div>
                        <span v-if="courseDetail.isFree == 1" class="free">免费</span>
                        <span v-else class="price">
                            ￥{{ courseDetail.isDiscount == 0 ? courseDetail.coursePrice : courseDetail.discountPrice }}
                        </span>
                        <span v-if="courseDetail.isFree == 0 && courseDetail.isDiscount == 1" class="old-price">
                            ￥{{ courseDetail.coursePrice }}
                        </span>
                    </div>
                    <div v-if="courseDetail.isFree == 0 && courseDetail.isDiscount" class="discount-info">
                        <span>限时钜惠</span>
                    </div>
                </div>
                <div class="tbn-box">
                    <button>立即观看</button>
                    <button @click="userAddChartCourse(courseDetail.courseId)">加入购物车</button>
                </div>
            </div>
            <!-- 右侧收藏 -->
            <div class="collect-box">
                <div>
                    <a-icon type="star" style="font-size: 20px;" />
                </div>
                <div>收藏</div>
            </div>

        </div>
    </div>
</template>

<script>
import { addChartCourse,getUserShoppingCartInfo } from '@/api/request'
export default {
    name: 'CourseInfoCard',
    data() {
        return {
        }
    },
    props: {
        courseDetail: {},
        score: {}
    },
    methods: {
        userAddChartCourse(courseId) {
            // 若用户登录
            if (this.$store.state.userInfo && Object.keys(this.$store.state.userInfo).length > 0) {
                if (this.courseDetail.isFree == 1) {
                    this.$message.warning('免费课程,您已获得课程');
                }
                else {
                    // 加入购物车
                    addChartCourse(courseId).then(res => {
                        console.log('加入购物车成功', res)
                        if (res.code == 0) {
                            this.$message.success('加入购物车成功');
                            // 获取购物车信息
                            getUserShoppingCartInfo().then(res => {
                                // 将state中购物车信息和数量初始化
                                this.$store.commit('setShoppingCartList', res.shoppingCartList)
                                this.$store.commit('setCount', res.shoppingCartList.length)
                            }).catch(err => {
                                console.log(err);
                            });
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                }
            }
            else {
                this.$message.warning('请先登录！')
            }


        }
    }
}
</script>

<style lang="less" scoped>
a {
    text-decoration: none;

    &:link,
    &:visited,
    &:hover,
    &active {
        color: inherit;
    }
}

.course-info-card-container {
    background-color: rgb(244, 244, 244);
}

.course-nav {
    background-color: rgb(83, 130, 247);
    width: 1200px;

    margin: auto;

    ul {
        display: flex;
        height: 160px;
    }

    ul>li {
        list-style: none;
        padding: 10px 20px;
        color: #fff;
    }


}

.course-card {
    width: 1120px;
    height: 280px;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    margin: auto;
    margin-top: -120px;
    display: flex;
    margin-bottom: 20px;

    .course-img {
        width: 33.3%;

        img {
            width: 330px;
            height: 220px;
            border-radius: 12px;
        }
    }

    .course-info {
        width: 58.7%;

        .course-title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 30px;
            font-weight: 500;
            color: #333;
        }

        .course-desc {
            margin: 10px 0;
            font-size: 14px;
            color: #999;
            display: flex;
            align-items: center;

            span {
                margin-right: 20px;
            }

            >div {
                font-size: 20px;

                svg {
                    margin-right: 5px;

                    path {
                        fill: rgb(250, 219, 20);
                    }
                }
            }
        }

        .course-price {
            height: 80px;

            .free {

                color: rgb(0, 207, 140);
                font-size: 26px;
                font-weight: 600;
                height: 70px;
            }

            .price {
                font-size: 26px;
                font-weight: 600;
                color: #f32425;
            }

            .old-price {
                font-weight: 500;
                color: #b7bbc4;
                font-size: 14px;
                text-decoration: line-through;
                margin: 0 10px;
            }

            .discount-info {
                margin: 10px 0;

                span {
                    background: linear-gradient(48deg, #fe26b8, #f7283f 23%, #fc3d3f 72%, #ff8d2a) !important;
                    border-radius: 3px;
                    color: #fff;
                    border-color: #ffd591;
                    padding: 0 7px;
                    font-size: 16px;
                    line-height: 20px;
                    height: 20px;
                    white-space: nowrap;
                }
            }
        }

        .tbn-box {
            button:first-of-type {
                width: 121px;
                height: 40px;
                font-size: 18px;
                border-radius: 24px;
                margin-right: 15px;
                color: #fff;
                background-color: #00cf8c;
                border-color: #00cf8c;
                text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
                border: none;
                box-shadow: 0 2px 0 rgba(0, 0, 0, .045);
            }

            button:last-of-type {
                width: 121px;
                height: 40px;
                background: #ffe9e9;
                border-radius: 24px;
                font-size: 18px;
                font-weight: 500;
                color: #f1534b;
                border: none;
            }
        }
    }

    .collect-box {
        div:last-of-type {
            color: rgb(157, 157, 157);
        }
    }
}
</style>
